// @ts-nocheck
let player = document.querySelector('.player');
let playBtn = document.querySelector('.toggle');
let video = document.querySelector('.viewer');
let progressBar = document.querySelector('.progress__filled');

let progress = document.querySelector('.progress');

let skipButtons = document.querySelectorAll('[data-skip]');

let ranges = document.querySelectorAll('.player input[type="range"]');

const togglePlay = () => {
	let currentState = video.paused ? 'play' : 'pause';
	if (currentState === 'play') {
		video.play();
		playBtn.textContent = '❚ ❚';
	} else {
		video.pause();
		playBtn.textContent = '►';
	}
};

const skip = (event) => {
	video.currentTime += parseFloat(event.target.dataset.skip);
};

video.addEventListener('click', togglePlay);
playBtn.addEventListener('click', togglePlay);

video.addEventListener('timeupdate', () => {
	let percent = (video.currentTime / video.duration) * 100;

	progressBar.style.flexBasis = `${percent}%`;
});

progressBar.addEventListener('click', (event) => {
	let rect = progressBar.getBoundingClientRect();
	let clickX = event.clientX - rect.left;

	let duration = video.duration;

	let newTime = (clickX / rect.width) * duration;

	video.currentTime = newTime;
});

progress.addEventListener('click', (event) => {
	let rect = progress.getBoundingClientRect();
	let clickX = event.clientX - rect.left;

	let duration = video.duration;

	let newTime = (clickX / rect.width) * duration;

	video.currentTime = newTime;
});
